<template>
	<div class="ProdTreeSelector">
		<el-dialog :close-on-click-modal="closeOnClickModal" title="添加商品" v-model="visible" width="800px" @open="open">
			<div class="content_wrap">
				<el-form ref="formRef" :model="ruleForm" label-width="80px">
					<el-row :gutter="10">
						<el-col :span="12">
							<el-form-item prop="parentId" label="商品分类">
								<CateSelector v-model="ruleForm.productCategoryId" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item prop="name" label="关键词">
								<el-input show-word-limit v-model="ruleForm.keyword" placeholder="请输入商品关键词" maxlength="200">
									<template #append>
										<el-button icon="Search" @click="search"></el-button>
									</template>
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<div class="tree_wrap" v-loading="loading">
					<el-tree ref="treeRef" :data="prodList" show-checkbox node-key="id" default-expand-all :props="props" @check="checkChange">
						<template #default="{ node, data }">
							<span class="custom-tree-node">
								<span v-if="node.level === 1" class="first_level">
									<Img width="50px" height="50px" :src="$utils.getMainPic(data.albumPics).src" />
									<span>{{ data.name }}</span>
								</span>
								<span v-if="node.level === 2">{{ data.spData }}</span>
							</span>
						</template>
					</el-tree>
					<el-checkbox v-model="allChecked" label="全选" :disabled="!$utils.arrHasData(prodList)" @change="allCheckedChange"></el-checkbox>
				</div>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false">取 消</el-button>
					<el-button type="primary" @click="toSave">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script>
import dialog from '/@/mixins/dialog';
import CateSelector from '/@/components/common/CateSelector.vue';
import { useProductApi } from '/@/api/product';
import { getTreeNodeSum } from '/@/utils';

const { getProdListWithSkuList } = useProductApi();

export default {
	name: 'ProdTreeSelector',
	props: {
		keyword: {
			type: String,
			default: '',
		},
	},
	mixins: [dialog],
	emits: ['update:modelValue', 'getSkuList'],
	components: { CateSelector },
	setup(props, { emit }) {
		const loading = ref(false);
		const treeRef = ref();
		const ruleForm = ref({});
		const prodList = ref([]);
		const checkedSkuList = ref([]);
		const allChecked = ref(false);
		let nodeSum = 0;
		const search = async () => {
			let res = await getProdListWithSkuList(ruleForm.value);
			if (res.code !== 200) return;
			prodList.value = res.data;
			nodeSum = getTreeNodeSum(prodList.value, 'skuStockList');
			allChecked.value = false;
		};

		const checkChange = () => {
			const checkedNodes = treeRef.value.getCheckedNodes();
			checkedSkuList.value = checkedNodes.filter(({ productId }) => productId);
			allChecked.value = checkedNodes.length === nodeSum;
		};
		return {
			loading,
			allChecked,
			ruleForm,
			prodList,
			search,
			toSave() {
				emit('getSkuList', checkedSkuList.value);
				emit('update:modelValue', false);
			},
			treeRef,
			props: {
				children: 'skuStockList',
			},
			checkChange,
			allCheckedChange(checked) {
				checked ? treeRef.value.setCheckedNodes(prodList.value) : treeRef.value.setCheckedNodes([]);
				checkChange();
			},
			open() {
				ruleForm.value.keyword = props.keyword;
				if (ruleForm.value.keyword) search();
			},
		};
	},
};
</script>

<style lang="scss" scoped>
.ProdTreeSelector {
	.tree_wrap {
		:deep(.el-tree) {
			> .el-tree-node {
				> .el-tree-node__content {
					height: 60px;
					.first_level {
						display: flex;
						align-items: center;
					}
				}
			}
		}
		.custom-tree-node {
			display: flex;
			align-items: center;
			.el-image {
				margin-right: 10px;
			}
		}
	}
}
</style>
